<template>
  <div class="album-list">
    <tag-content-header add search refresh @toolFun="toolFun" :settingData="columns">
      <template #title>
        <span>专辑列表</span>
      </template>
    </tag-content-header>
    <tag-table
      ref="table"
      @refresh="getList"
      :data="dataList"
      :loading="loading"
      :columns="columns"
      :params="params"
      :total="totalSize"
      :selection="selection"
      rowKey="assetAlbumId"
    >
      <template #operation="{ scope }">
        <div class="operation-button-box">
          <el-tooltip effect="dark" content="关注" placement="top" :enterable="false">
            <span class="el-watch"><icon-svg name="iconStar"></icon-svg> {{ scope.row.albumWatchCount }}</span>
          </el-tooltip>
          <el-tooltip effect="dark" content="分享" placement="top" :enterable="false">
            <span class="el-share"><icon-svg name="iconShare"></icon-svg> {{ scope.row.albumShareCount }}</span>
          </el-tooltip>
          <el-tooltip effect="dark" content="评价" placement="top" :enterable="false">
            <span class="el-comment"><icon-svg name="iconEvaluate"></icon-svg> {{ scope.row.albumCommentCount }}</span>
          </el-tooltip>
        </div>
      </template>
    </tag-table>
    <album-drawer ref="albumDrawer" @callback="toolFun('refresh')"></album-drawer>
  </div>
</template>

<script>
import albumDrawer from './album-edit-drawer'
export default {
  components: {
    albumDrawer
  },
  props: {
    selection: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      loading: false,
      dataList: [],
      belongAlbumIds: [],
      columns: [
        {
          show: true,
          label: '专辑名称',
          prop: 'albumNm',
          search: true,
          searchKey: '',
          align: 'center'
        },
        {
          show: true,
          label: '标签数量',
          prop: 'tagCount',
          align: 'center'
        },
        {
          show: true,
          label: '专辑描述',
          prop: 'albumDesc',
          search: true,
          searchKey: '',
          align: 'center'
        },
        {
          show: 'fixed',
          label: '专辑使用信息',
          prop: 'operation',
          align: 'center',
          width: 200
        }
      ],
      params: {
        ascs: [],
        descs: [],
        currentPageNum: 1,
        pageSize: 10,
        queryParams: {},
        descPriority: false
      },
      totalSize: 0
    }
  },
  methods: {
    getList(belongAlbumIds = []) {
      this.loading = true
      this.params.queryParams.userId = this.$store.state.user.id
      this.$ajax({
        url: this.$ajax.setUrl('index/supermarket/albumList'),
        method: 'get',
        params: this.$ajax.setParams(this.params)
      }).then(({ data }) => {
        if (data && data.code === '0') {
          if (data.data.currentPageNum === this.params.currentPageNum) {
            this.dataList = data.data.records
            this.totalSize = data.data.totalSize
            if (this.selection && belongAlbumIds && belongAlbumIds.length) {
              this.belongAlbumIds = belongAlbumIds
              belongAlbumIds.forEach(v =>
                this.$nextTick(() => {
                  let row = this.dataList.find(album => album.assetAlbumId === v.toString())
                  if (row) {
                    let selectedRow = this.$refs.table.getSelectList()
                    if (!selectedRow.find(item => item.assetAlbumId === row.assetAlbumId))
                      this.$refs.table.$refs.tagTable.toggleRowSelection(row)
                  }
                })
              )
            }
          }
        } else {
          this.$message.error(data.data || data.msg)
        }
        this.loading = false
      })
    },
    toolFun(operation) {
      switch (operation) {
        case 'add':
          this.$refs.albumDrawer.showDrawer()
          break
        case 'search':
          // 搜索动作
          this.$refs['table'].searchToggle()
          break
        case 'refresh':
          // 刷新动作
          this.getList(this.belongAlbumIds)
          break
      }
    },
    clearSelection() {
      this.$refs.table.$refs.tagTable.clearSelection()
    }
  }
}
</script>

<style lang="scss">
.album-list {
  padding-top: 20px;
  .operation-button-box {
    svg {
      width: 20px;
      height: 20px;
      vertical-align: middle;
      margin: -5px 5px 0 0;
    }
    .el-watch {
      color: #fca438;
      margin-right: 20px;
    }
    .el-share {
      color: #8e99cf;
      margin-right: 20px;
    }
    .el-comment {
      color: #88c0ef;
    }
  }
}
</style>
